import { memo, useState, useEffect, useMemo } from "react";
import Top from "../../components/top/Top";
import styles from "./story.module.scss";
import { Button, InfiniteScroll } from "antd-mobile";
import { accept } from "../../Api";
import Audio from "../../components/story/audioShow/Audio";
import { useNavigate } from "react-router-dom";
let Story: React.FC = () => {
  let to = useNavigate();
  let [parameter, setParameter] = useState({
    //参数
    page: "1",
    language: "0",
    perpage: "10",
  });
  let [list, setList] = useState<Obj[]>([]); //列表渲染数据
  let data = async () => {
    let { data } = await accept(parameter);
    setList((val) => [...val, ...data.data.list]);
    setHasMore(list.length < data.data.total);
    // console.log(data);
    setParameter({ ...parameter, page: String(Number(parameter.page) + 1) });
  };
  //时间处理函数
  let tim = useMemo(
    () => (data: string) =>
      "0" +
      Math.floor(Number(data) / 60) +
      ":" +
      (Number(data) % 60 > 9 ? Number(data) % 60 : "0" + (Number(data) % 60)),
    []
  );
  let [hasMore, setHasMore] = useState(true); //数据是否请求完毕
  let [flae, setFlag] = useState(true); //判断类型
  let [srce, setSrce] = useState(""); //音乐播放暂存地址
  let [display, setDispaly] = useState(false);
  return (
    <>
      <Top title="听故事" />
      <div className={styles.top}>
        <div className={styles.buttom}>
          <Button
            color="success"
            fill={flae ? "solid" : "outline"}
            size="small"
            onClick={() => {
              setFlag(true);
              setParameter({ ...parameter, page: "1", language: "0", perpage: "10" });
              setList([]);
            }}>
            国语
          </Button>
          <Button
            color="success"
            fill={flae ? "outline" : "solid"}
            size="small"
            onClick={() => {
              setFlag(false);
              setParameter({ ...parameter, page: "1", language: "3", perpage: "10" });
              setList([]);
            }}>
            英语
          </Button>
        </div>
        <div className={styles.buttomr}>
          <i className="iconfont icon-24gl-swapHorizontal3"> &nbsp; 连续播放</i>
        </div>
      </div>
      <ul className={styles.ul}>
        {list.map((item) => (
          <li key={item.id}>
            <img
              src={item.cover_image}
              alt=""
              onClick={() => to("/bookdetails/" + item.goods_id)}
            />
            <div className={styles.text} onClick={() => to("/bookdetails/" + item.goods_id)}>
              <h3>{item.title}</h3>
              <div className={styles.time}>
                <div className={styles.tims}>
                  <i className="iconfont icon-shijian"> </i>
                  <span>{tim(item.time)}</span>
                </div>
                <div className={styles.tims}>
                  <i className="iconfont icon-fuwuerji"> </i>
                  <span>{item.play_num}</span>
                </div>
              </div>
              <div className={styles.user}>
                <img src={item.expert_info.avatar} alt="" />
                <span>{item.expert_info.name}</span>
              </div>
            </div>
            <button
              onClick={() => {
                setSrce(item.video_url);
                setDispaly(true);
              }}>
              <i className="iconfont icon-bofang"></i>
              播放
            </button>
            <Audio src={srce} display={display} setDis={setDispaly} />
          </li>
        ))}
        <InfiniteScroll loadMore={data} hasMore={hasMore} />
      </ul>
    </>
  );
};
export default memo(Story);
